﻿<%@ Page Title="" Language="C#" MasterPageFile="~/MainMaster.Master" AutoEventWireup="true" CodeBehind="GoodsDetail.aspx.cs" Inherits="GoShopping.GoodsDetail" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script src="Content/js/vue.js"></script>
    <script src="Content/js/jquery-1.10.2.min.js"></script>
   
    <style type="text/css">
        
        .detail {
            display: flex;
            flex-direction: row;
            padding: 0px 100px;
            padding-right: 300px;
            width: 100%
        }

            .detail .left {
                min-width: 560px;
                height: 560px;
                display: flex;
                justify-content: center;
                align-items: center;
            }

                .detail .left .img {
                    width: 300px;
                    height: 300px;
                    overflow: hidden;
                }

                    .detail .left .img img {
                        width: 100%;
                        height: 100%;
                    }

            .detail .right {
                padding-top: 50px;
                min-width: 452px;
            }

                .detail .right .ul .li {
                    margin-bottom: 30px;
                    text-align: left
                }

                .detail .right .ul .car {
                    background-color: #00cbfd;
                    color: white;
                    width: 252px;
                    height: 60px;
                    line-height: 60px;
                    text-align: center;
                    cursor: pointer;
                    margin-right: 10px;
                }

        .address-box {
            background: #fafafa;
            border: 1px solid #e0e0e0;
            height: 100px;
            width: 100%;
            word-wrap: break-word;
        }

        .desc {
            height: 50px;
            word-wrap: break-word;
        }

        .like {
            width: 141px;
            height: 60px;
            background: #b0b0b0;
            border-color: grey;
            color: #fff;
            line-height: 60px;
            font-size: 30px;
            border: none
        }

        .selectLike {
            color: red
        }
        .review{
            width:100%;
            background-color:white;
            padding:50px 0
        }
        .review .review-out{
            width:80%;
            margin:0 auto;
            display:flex;
            flex-direction:row;
            overflow:hidden;
            margin-bottom:20px
        }
        .review .review-out .review_img{
            width:50px;
            height:50px;
            border-radius:50%;
            overflow:hidden
        }
        .review .review-out .review_img img{
            width:100%;
            height:100%
        }
        .flex{
            flex:1
        }
        .review_name,.review_icon,.review_time{
             line-height:50px
         }
        .review_name{
            margin-left:10px;
            margin-right:10px
        }
        .review_content{
            width:80%;
            margin:0 auto;
            text-align:left;
            font-size: 14px;
            color: #333;
            border-bottom:1px solid #00cbfd;
            padding-bottom:20px;
            margin-bottom:20px
        }
    </style>
    
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div class="detail" v-for="item in goods">
        <div class="left">
            <div class="img">
                <img :src="item.GoodsPic"  />
            </div>
        </div>
        <div class="right">
            <div class="ul">
                <div class="li" style="font-size: 30px; color: #212121;">
                    {{item.GoodsName}}
                </div>
                <div class="li desc" style="color: gray;word-wrap:break-word;">
                    {{item.GoodsDesc}}
                </div>
                <div class="li" style="color: #00cbfd;">
                    小米自营
                </div>
                <div class="li" style="color: #00cbfd;">
                    ￥{{item.GoodsPrice}}
                </div>
                <div style="text-align:left">
                    <el-input-number v-model="num"  :min="1" :max="10" label="描述文字"></el-input-number>
                </div>
                <hr style="margin-top:5px"/>
                
                <div class="li" style="margin-top:10px">
                    

                </div>
                <div style="display:flex">
                    <div class="li car" @click="addCar">
                     加入购物车
                    </div>
                    <div class="like selectLike" v-if="likeState==true"@click="like">
                        <i class="el-icon-star-on" ></i>
                    </div>
                    <div @click="like" class="like"  v-else>
                        <i class="el-icon-star-off"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="review">
        <span style="display: block; width: 100px; height: 30px; line-height: 30px; text-align: center; background-color: #00cbfd; color: white; margin-left: 145px">评论</span>
        <hr style="background-color: #00cbfd; margin-bottom: 10px" />
        <div v-for="item in reView">
            <div class="review-out">
                <div class="review_img">
                    <img src="images/moren.jpg" />
                </div>
                <div class="review_name">{{item.UserName}}</div>
                <div class="review_icon">
                    <el-rate show-text style="line-height: 50px; height: 50px" disabled="true" :value="item.Manyi"></el-rate>
                </div>
                <div class="flex"></div>
                <div class="review_time" style="font-size: 14px;color: #333;">
                    发布时间：{{item.ReviewTime}}
                </div>
            </div>

            <div class="review_content">{{item.ReviewContent}}</div>
        </div>
        <div v-if="reView.length==0">
            <el-empty description="暂无评论~"></el-empty>
        </div>
    </div>
</asp:Content>
